// 入口函数
$(function () {
    // 需求1：初始化文章分类列表 - 封装成函数
    let layer = layui.layer
    let form = layui.form
    initArtCateList() //函数不调用不执行
    function initArtCateList() {
        axios({
            url: '/my/article/cates',
        }).then(res => {
            //成功回调
            //  console.log(res)
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            // 成功，渲染
            let arr = ['<option value="">请选择文章所属分类</option>']
            res.data.data.forEach(ele => {
                arr.push(
                    `<option value="${ele.Id}">${ele.name}</option>`
                )
            })
            // 循环结束赋值
            let str = arr.join('')
            $("[name=cate_id]").empty().html(str)
            // form.render();可以渲染layui中的select/checkbox/cadio
            form.render()
        });
    }

    // 需求2：初始化富文本编辑器
    initEditor()

    // 需求3：文章封面图片
    // 3.1. 初始化图片裁剪器
    let  $image = $('#image')
    // 3.2. 裁剪选项
    let options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }
    // 3.3. 初始化裁剪区域
    $image.cropper(options)

    // 需求4：定义状态
    let state = ''
    $('#btn1').on('click',function(){
        state = '已发布'
    })
    $('#btn2').on('click',function(){
        state = '草稿'
    })
    // 需求.发布文章
    $('#formPub').on('submit',function(e){
        e.preventDefault()
        // 生成FormData对象
        let fd = new FormData(this)
        // 添加状态字段
        fd.append('state',state)
        // console.log(...fd);
    })

    // 需求5：选择图片
    $('#chooseImageBtn').on('click',function(){
        $('#chooseImageInp').click()
    })
    $('#chooseImageInp').on('change',function(e){
        // 拿到用户选择的文件
        let file = e.target.files[0]
        // 非空校验
        if(file === undefined) {
            return layer.msg('文章封面不能为空!')
        }
        // 根据选择的文件，创建一个对应的 URL 地址
        let newImgURL = URL.createObjectURL(file)
        $image 
            .cropper('destroy')
            .attr('scr',newImgURL )
            .cropper(options)
    })
    // 需求6：文章发布
    $('#formPub').on('submit',function(e){
        e.preventDefault()
        // 生成FormData对象
        let fd = new FormData(this)
         // 添加状态字段
         fd.append('state',state)
         $image
             .cropper('getCroppedCanvas',{
                 width:400,
                 height:280
             })
             .toBlob(function(blob){
                //  得到文件对象 blob 后，进行后续的操作
                fd.append('cover_img',blob)
                // console.log(...fd);
                axios({
                    url:'/my/article/add',
                    method:'post',
                    data: fd
                }).then(res=>{
                    //成功回调
                   if(res.data.status !==0) {
                       return layer.msg(res.data.message)
                   }
                //    成功提示：
                   layer.msg('恭喜您，添加文章成功!')
                //    跳转，父盒子里面a链接的点击事件，实现跳转
                   setTimeout(function(){
                       window.parent.document.querySelector('#art_list').click()
                   },2000)
                });
             })

    })
})